<template>
	<div style="position: relative;height: 100%;">
		<div style="width: 100%;height: 20px;background-color: #ebedf0;"></div>
		<Row style="margin-top: 20px;margin-bottom:20px;">
			<Col span="6">
			<span>年段：</span>
			<Select v-model="gradeSelect" @on-change="gradeSelectChange" style="width: 150px;">
				<Option v-for="item in gradeList" :value="item.value" :key="item.value">{{item.label}}</Option>
			</Select>
			</Col>
		</Row>
		<Row style="text-align: left;margin-top: 41px;">
			<Col span="12" style="text-align: left;">
			<span style="border-left: 5px solid #517EDB;font-size: 16px;"></span>
			<span style="font-size: 16px;font-weight: 800;margin-left: 41px;">等级比例设置</span>
			</Col>
		</Row>
		<Row style="margin-top: 20px;margin-bottom:20px;">
			<Col span="6">
			<span>科目类型：</span>
			<Select v-model="subjectSelect" @on-change="subjectSelectChange" style="width: 150px;">
				<Option v-for="item in subjectList" :value="item.value" :key="item.value">{{item.label}}</Option>
			</Select>
			</Col>
		</Row>
		<Row style="width: 100%;text-align: left;padding: 20px;">
			<Button type="primary" @click="edit()" style="font-size: 15px;">编辑</Button>
		</Row>
		<div style="padding: 10px 20px 20px 20px;margin-top: 20px;display: block;">
			<div style="position: relative;">
				<Table border :columns="columns" :data="data2"></Table>
			</div>
		</div>
		<Col v-if="sortSettingHidden" span="10" style=" width: 600px; z-index: 1000;background-color: white;margin: auto;position: absolute;top: 200px;left: 0;right: 0;text-align: left;height:500px;border: 1px solid #e9eaec;padding: 10px;border-radius: 15px;">
		<Row style="width: 100%;text-align: center;">
			<span style="font-size: 21px;">{{subjectName}}</span>
		</Row>
		<Row style="width: 100%;text-align: center;margin-bottom: 20px;">
			<span v-if="show" style="margin-bottom: 20px;font-size: 21px;">{{addoredit}}</span>
		</Row>
		<table style="display: block;width: 100%; font-size: 17px;">
			<tr>
				<th style=" display: inline-block;width: 25%;text-align: center;float: left;">等级</th>
				<th style=" display: inline-block;width: 25%;text-align: center;float: left;">上限</th>
				<th style=" display: inline-block;width: 25%;text-align: center;float: left;">下限</th>
			</tr>
			<tr v-for="(item,index) in data4" :key="index" style="width: 100%;">
				<td style="display: block;width: 25%;text-align: center;float: left;">{{item.subsectionSort}}</td>
				<td style="display: block;width: 25%;float: left;text-align: center;"><input type="number" v-model="item.subsectionEnd" style="margin: 0 auto; text-align:center;width: 50%;"></input><span>%</span>
				</td>
				<td style="display: block;width: 25%;float: left;text-align: center;"><input type="number" v-model="item.subsectionStart" style="margin: 0 auto; text-align:center;width: 50%;"></input><span>%</span>
				</td>
				<td style="display: block;width: 25%;float: left;text-align: center;">
					<Tooltip content="删除等级" theme="light" placement="top">
						<Button v-if=" index===data4.length-1?true:false" @click="sortDel(item,index)" type="error" size="small"><i class="iconfont alicon-delete"></i></Button>
					</Tooltip>
					<Tooltip content="新增等级" theme="light" placement="top">
						<Button v-if=" index===data4.length-1?true:false" @click="sortAdd(item,index)" type="success" size="small"><i class="iconfont alicon-add1"></i></Button>
					</Tooltip>
				</td>
			</tr>
		</table>
		<Row style="text-align: center;">
			<Col span="24" style="margin-top:15px">
			<Button type="ghost" @click="chance" icon="close-round" style="margin-right: 20px;">取消</Button>
			<Button type="primary" @click="savesort" icon="checkmark-round">保存</Button>
			</Col>
		</Row>
		</Col>
		<Row style="text-align: left;margin-top: 41px;">
			<Col span="12" style="text-align: left;">
			<span style="border-left: 5px solid #517EDB;font-size: 16px;"></span>
			<span style="font-size: 16px;font-weight: 800;margin-left: 41px;">总分科目比例设置</span>
			</Col>
		</Row>
		<Row style="margin:5px 0px 0px 0px;padding: 20px;">
			<Col span="24" style="text-align: left;">
			<span style="font-size: 18px;color: #1a1a1a;font-weight: 540;">说明:</span><span style="font-size: 15px;color: #1a1a1a;font-weight: 540;">设置各科分数在总分中的占比。如：总分=语文*比例值+数学*比例值+英语*比例值</span>
			</Col>
		</Row>
		<div style="padding: 10px 20px 20px 20px;margin-top: 20px;display: block;">
			<div style="position: relative;">
				<Table border :columns="columns1" :data="data5"></Table>
			</div>
		</div>
		<Row style="text-align: left;margin-top: 41px;">
			<Col span="12" style="text-align: left;">
			<span style="border-left: 5px solid #517EDB;font-size: 16px;"></span>
			<span style="font-size: 16px;font-weight: 800;margin-left: 41px;">排名等级分制设置</span>
			</Col>
		</Row>
		<Row style="margin:5px 0px 0px 0px;padding: 20px;">
			<Col span="24" style="text-align: left;">
			<span style="font-size: 18px;color: #1a1a1a;font-weight: 540;">说明:</span><span style="font-size: 15px;color: #1a1a1a;font-weight: 540;">设置各等级的分制值。如：等级排名=A的个数*A的分制值+B的个数*B的分制值+C的个数*C的分制值</span>
			</Col>
		</Row>
		<div style="padding: 10px 20px 20px 20px;margin-top: 20px;display: block;">
			<div style="position: relative;">
				<Table border :columns="columns2" :data="data6"></Table>
			</div>
		</div>
	</div>
</template>
<script>
	import api from "@/components/js/Apidomain.js"
	import { getsessionstorage, setsessionstorage } from '@/components/js/Localstorage'
	import axios from 'axios'
	export default {
		data() {
			return {
				gradeSelect: "",
				gradeList: [],
				subjectSelect: "",
				subjectList: [],
				columns: [{
						title: '等级',
						key: 'subsectionSort',
						align: 'center',
					},
					{
						title: '比例上限值',
						key: "subsectionEnd",
						align: 'center',
					},
					{
						title: '比例下限值',
						key: 'subsectionStart',
						align: 'center',
					},
				],
				columns1: [{
						title: '科目',
						key: 'name',
						align: 'center',
					},
					{
						title: '比例',
						align: 'center',
						render: (h, params) => {
							return h('InputNumber', {
								props: {
									value: parseFloat(this.data5[params.index].rate),
									size: 'small',
								},
								style: {
									width: '100px'
								},
								on: {
									'on-focus': () => {

										this.getitemid(
											this.itemid = this.data5[params.index].id,

										)
									},
									'on-blur': () => {
										this.updateFoo(
											this.itemid = this.data5[params.index].id,
											this.data5[params.index].rate = event.target.value,
											this.itemrate = this.data5[params.index].rate
										)
									},
								}
							})
						}
					},
				],
				columns2: [{
						title: '等级',
						key: 'name',
						align: 'center',
					},
					{
						title: '分值',
						align: 'center',
						render: (h, params) => {
							return h('InputNumber', {
								props: {
									value: parseFloat(this.data6[params.index].score),
									size: 'small',
								},

								style: {
									width: '100px'
								},
								on: {
									'on-focus': () => {
										this.getitemidlevel(
											this.itemid = this.data6[params.index].id,
										)
									},
									'on-blur': () => {
										this.updateFoolevel(
											this.itemid = this.data6[params.index].id,
											this.data6[params.index].score = event.target.value,
											this.itemscore = this.data6[params.index].score
										)
									},
								}
							})
						}
					},
				],
				data1: [],
				data2: [],
				data3: [],
				data4: [],
				addoredit: "",
				subsectionSort: "", //等级
				subsectionEnd: "", //上限
				subsectionStart: "", //下限
				sortSettingHidden: false,
				show: false,
				Id: "",
				ojbk: false,
				subjectName: "",
				data5: [],
				id5: "",
				itemid: "",
				itemrate: "",
				data6: [],
				itemscore: "",
			}
		},
		created() {
			this.getInitSubsectionParamSelect()
		},
		computed: {
		},
		methods: {
			getInitSubsectionParamSelect: function() {
				var self = this;
				let url = api.apidomain + '/tqes/web/tchSubsectionParamDefine/getInitSubsectionParamSelect';
				this.$http.post(url, {
					"type":"MIDDLE"
				}).then(function(response) {
						if(response.data.success == true) {
							//						console.log(response.data.data)
							self.gradeList = response.data.data.gradeNoList
							//						console.log(self.gradeList)
							if(self.gradeList.length != 0) {
								self.gradeSelect = self.gradeList[0].value;
							}
							self.getSubsectionParamSelectByParamType();
							self.findByGroadNo()
							self.findByGroadNolevel()
						} else if(response.data.success == false) {
							self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});
						}
					})
					.catch(function(error) {
						self.$Message.error({
							content: '系统发生错误:错误码00295',
							duration: 10,
							closable: true
						});
					});
			},
			gradeSelectChange: function() {
				this.getSubsectionParamSelectByParamType()
				this.findByGroadNo()
				this.findByGroadNolevel()
			},
			getSubsectionParamSelectByParamType: function() {
				var self = this;
				let url = api.apidomain + '/tqes/web/tchSubsectionParamDefine/getSubsectionParamSelectByParamType';
				this.$http.post(url, {
						"no": this.gradeSelect
					}).then(function(response) {
						if(response.data.success == true) {
							//							console.log(response.data.data)
							self.subjectList = response.data.data.subjectList
							if(self.subjectList.length != 0) {
								self.subjectSelect = self.subjectList[0].value;
								console.log(self.subjectSelect)
								//								console.log(self.subjectLabel)
							}
							self.subjectfindone()
						} else if(response.data.success == false) {
							self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});
						}
					})
					.catch(function(error) {
						self.$Message.error({
							content: '系统发生错误:错误码00296',
							duration: 10,
							closable: true
						});
					});
			},
			subjectSelectChange: function() {
				this.subjectfindone()
			},
			edit: function() {
				this.show = true
				this.data4 = JSON.parse(JSON.stringify(this.data1)); //vue的深浅拷贝,防止data4随着data1变化
				this.addoredit = "等级比例设置"
				this.sortSettingHidden = true
				if(this.data4.length == 0) {
					this.data4.push({
						subsectionSort: A,
						subsectionEnd: "",
						subsectionStart: ""
					})
				}
			},
			subjectfindone: function() {
				var self = this;
				let url = api.apidomain + '/tqes/web/tchSubsectionParamDefine/findOne';
				this.$http.post(url, {
						"gradeNo": this.gradeSelect,
						"subjectId": this.subjectSelect,
						"subsectionType": 4
					}).then(function(response) {
						if(response.data.success == true) {
							self.data1 = response.data.data.subsectionParamSetDetailList
							self.data2 = JSON.parse(JSON.stringify(self.data1)); //vue的深浅拷贝,防止data4随着data1变化
							for(var i = 0; i < self.data2.length; i++) {
								//								console.log(self.data2[i])
								self.data2[i].subsectionEnd = self.data2[i].subsectionEnd + '%'
								self.data2[i].subsectionStart = self.data2[i].subsectionStart + '%'
							}
							self.Id = response.data.data.id
							self.subjectName = response.data.data.subjectName
						} else if(response.data.success == false) {
							self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});
						}
					})
					.catch(function(error) {
						self.$Message.error({
							content: '系统发生错误:错误码00297',
							duration: 10,
							closable: true
						});
					});
			},
			chance: function() {
				this.sortSettingHidden = false;
			},
			savesort: function() {
				this.data3 = JSON.stringify(this.data4)
				var self = this;
				for(var i = 0; i < this.data4.length; i++) {
//					console.log(this.data4[i])
					if(this.data4[i].subsectionStart == "" && this.data4[i].subsectionEnd == "") {
						this.$Message.error({
							content: '上下限均为空，请删除',
							duration: 10,
							closable: true
						})
						this.ojbk = false
						break;
					} else if(this.data4[i].subsectionStart != "" && this.data4[i].subsectionEnd != "") {
						if(this.data4[i].subsectionStart < 0 || this.data4[i].subsectionEnd < 0) {
							this.$Message.error({
								content: '上下限不能为负数',
								duration: 10,
								closable: true
							})
							this.ojbk = false
							break;
						} else if(parseFloat(this.data4[i].subsectionEnd) == 0) {
							this.$Message.error({
								content: '上限不能为0',
								duration: 10,
								closable: true
							})
							this.ojbk = false
							break;
						} else if(parseFloat(this.data4[i].subsectionEnd) <= parseFloat(this.data4[i].subsectionStart)) {
							console.log(this.data4[i].subsectionEnd)
							console.log(this.data4[i].subsectionStart)
							this.$Message.error({
								content: '同一段的上限不能小于等于下限',
								duration: 10,
								closable: true
							})
							this.ojbk = false
							break;
						} else if(this.data4[i + 1] != undefined && parseFloat(this.data4[i].subsectionStart) < parseFloat(this.data4[i + 1].subsectionEnd)) {
							this.$Message.error({
								content: '上一段的下限不能小于下一段的上限',
								duration: 10,
								closable: true
							})
							this.ojbk = false
							break;
						} else {
							this.ojbk = true
						}
					} else if(this.data4[i].subsectionStart != "" && this.data4[i].subsectionEnd == "") {
						this.$Message.error({
							content: '同一段存在下限，上限不能为空',
							duration: 10,
							closable: true
						})
						this.ojbk = false
						break;
					} else if(this.data4[i].subsectionStart == "" && this.data4[i].subsectionEnd != "") {
						this.$Message.error({
							content: '同一段存在上限，下限不能为空',
							duration: 10,
							closable: true
						})
						this.ojbk = false
						break;
					} else {
						this.ojbk = true
					}
				}
				if(this.ojbk == true) {
					let url = api.apidomain + '/tqes/web/tchSubsectionParamDefine/save'
					this.$http.post(url, {
							"id": this.Id, //新增的时候为空
							"subsectionDefine": this.data3,
							"gradeNo": this.gradeSelect,
							"subjectId": this.subjectSelect,
							"subsectionType": 4
						})
						.then(function(response) {
							if(response.data.success == true) {
								//							console.log(response.data.data)
								self.$Message.success({
									content: '保存成功',
									duration: 10,
									closable: true
								});
								self.sortSettingHidden = false;
								self.subjectfindone()
//								window.location.reload()
							} else if(response.data.success == false) {

								self.$Message.error({
									content: response.data.msg,
									duration: 10,
									closable: true
								});
							}
						})
						.catch(function(error) {

							self.$Message.error({
								content: '系统发生错误:错误码00298',
								duration: 10,
								closable: true
							});
						});
				}
			},
			sortDel: function(item, index) {
				this.data4.pop()
				var code = String.fromCharCode(64 + parseInt(this.data4.length + 1));
				console.log(code)
				if(this.data4.length == 0) {
					this.data4.push({
						subsectionSort: code,
						subsectionEnd: "",
						subsectionStart: ""
					})
				}
			},
			sortAdd: function(item, index) {
				var code = String.fromCharCode(64 + parseInt(this.data4.length + 1));
				this.data4.push({
					subsectionSort: code,
					subsectionEnd: "",
					subsectionStart: ""
				})
				//				console.log(this.data4.subsectionEnd)
			},
			findByGroadNo: function() {
				var self = this;
				let url = api.apidomain + '/tqes/web/TchGradeRatioSetting//findByGroadNo/' + this.gradeSelect + '/1';
				this.$http.get(url, {}).then(function(response) {
						if(response.data.success == true) {
							//							console.log(response.data.data)
							self.data5 = response.data.data
						} else if(response.data.success == false) {
							self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});
						}
					})
					.catch(function(error) {
						self.$Message.error({
							content: '系统发生错误:错误码00296',
							duration: 10,
							closable: true
						});
					});
			},
			getitemid: function() {},
			updateFoo: function() {
				var self = this;
				if(this.itemrate < 0) {
					this.$Message.error({
						content: '比例不能为负数',
						duration: 10,
						closable: true
					});
				} else {
					let url = api.apidomain + '/tqes/web/TchGradeRatioSetting/save';
					this.$http.post(url, {
							"id": this.itemid,
							"type": 1,
							"gradeNo": this.gradeSelect,
							"rate": this.itemrate,
						}).then(function(response) {
							if(response.data.success == true) {
								console.log(response.data.data)
								self.$Message.success({
									content: '保存成功',
									duration: 10,
									closable: true
								});
								self.findByGroadNo()
							} else if(response.data.success == false) {
								self.$Message.error({
									content: response.data.msg,
									duration: 10,
									closable: true
								});
							}
						})
						.catch(function(error) {
							self.$Message.error({
								content: '系统发生错误:错误码00297',
								duration: 10,
								closable: true
							});
						});
				}
			},
			findByGroadNolevel: function() {
				var self = this;
				let url = api.apidomain + '/tqes/web/TchGradeRatioSetting//findByGroadNo/' + this.gradeSelect + '/2';
				this.$http.get(url, {}).then(function(response) {
						if(response.data.success == true) {
							//							console.log(response.data.data)
							self.data6 = response.data.data
						} else if(response.data.success == false) {
							self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});
						}
					})
					.catch(function(error) {
						self.$Message.error({
							content: '系统发生错误:错误码00296',
							duration: 10,
							closable: true
						});
					});
			},
			getitemidlevel: function() {},
			updateFoolevel: function() {
				var self = this;
				if(this.itemscore < 0) {
					this.$Message.error({
						content: '分值不能为负数',
						duration: 10,
						closable: true
					});
				} else {
					let url = api.apidomain + '/tqes/web/TchGradeRatioSetting/save';
					this.$http.post(url, {
							"id": this.itemid,
							"type": 2,
							"gradeNo": this.gradeSelect,
							"score": this.itemscore,
						}).then(function(response) {
							if(response.data.success == true) {
								console.log(response.data.data)
								self.$Message.success({
									content: '保存成功',
									duration: 10,
									closable: true
								});
								self.findByGroadNolevel()
							} else if(response.data.success == false) {
								self.$Message.error({
									content: response.data.msg,
									duration: 10,
									closable: true
								});
							}
						})
						.catch(function(error) {
							self.$Message.error({
								content: '系统发生错误:错误码00297',
								duration: 10,
								closable: true
							});
						});
				}
			},

		},
	}
</script>

<style lang="css" scoped>
	/*.indexshow>>>.ivu-select-single .ivu-select-selection {*/
	/*border: none;
    	border-radius: 0px*/
	/*}*/
	/*.indexshow>>>.active {
		background-color: #517EDB;
		color: white;
	}*/
</style>